import { Button, Card, Drawer, Table, Tooltip } from 'antd';
import React, { useState, useEffect } from 'react';
import * as api from '@/services/ReturnMoneyPlanMgr';
import _ from 'lodash';

// function TextValue ({ val }) {
//   return (
//     <Tooltip placement="topLeft" title={<div className="tooltip-height">{val}</div>}>
//       <span className="ellipsis">{val}</span>
//     </Tooltip>
//   )
// };

const key = [
  'eightMonth',
  'eighteenMonth',
  'elevenMonth',
  'fifteenMonth',
  'fiveMonth',
  'fourMonth',
  'fourteenMonth',
  'nineMonth',
  'nineteenMonth',
  'oneMonth',
  'sevenMonth',
  'seventeenMonth',
  'sixMonth',
  'sixteenMonth',
  'tenMonth',
  'thirteenMonth',
  'threeMonth',
  'total',
  'twelveMonth',
  'twentyFourMonth',
  'twentyMonth',
  'twentyOneMonth',
  'twentyThreeMonth',
  'twentyTwoMonth',
  'twoMonth',
];

const columns = [
  {
    width: 160,
    title: '标准业态',
    dataIndex: 'proProductType',
    key: 'proProductType',
    fixed: 'left',
    render: text => (
      <Tooltip placement="topLeft" title={<div className="tooltip-height">{text}</div>}>
        <div className="ellipsis" style={{ width: '140px' }}>
          {text}
        </div>
      </Tooltip>
    ),
  },
  {
    width: 180,
    title: '版本',
    dataIndex: 'versionName',
    key: 'versionName',
    fixed: 'left',
    render: text => (
      <Tooltip placement="topLeft" title={<div className="tooltip-height">{text}</div>}>
        <div className="ellipsis" style={{ width: '160px' }}>
          {text}
        </div>
      </Tooltip>
    ),
  },
  {
    title: '第1个月',
    dataIndex: 'oneMonth',
    key: 'oneMonth',
    align: 'right',
  },
  {
    title: '第2个月',
    dataIndex: 'twoMonth',
    key: 'twoMonth',
    align: 'right',
  },
  {
    title: '第3个月',
    dataIndex: 'threeMonth',
    key: 'threeMonth',
    align: 'right',
  },
  {
    title: '第4个月',
    dataIndex: 'fourMonth',
    key: 'fourMonth',
    align: 'right',
  },
  {
    title: '第5个月',
    dataIndex: 'fiveMonth',
    key: 'fiveMonth',
    align: 'right',
  },
  {
    title: '第6个月',
    dataIndex: 'sixMonth',
    key: 'sixMonth',
    align: 'right',
  },
  {
    title: '第7个月',
    dataIndex: 'sevenMonth',
    key: 'sevenMonth',
    align: 'right',
  },
  {
    title: '第8个月',
    dataIndex: 'eightMonth',
    key: 'eightMonth',
    align: 'right',
  },
  {
    title: '第9个月',
    dataIndex: 'nineMonth',
    key: 'nineMonth',
    align: 'right',
  },
  {
    title: '第10个月',
    dataIndex: 'tenMonth',
    key: 'tenMonth',
    align: 'right',
  },
  {
    title: '第11个月',
    dataIndex: 'elevenMonth',
    key: 'elevenMonth',
    align: 'right',
  },
  {
    title: '第12个月',
    dataIndex: 'twelveMonth',
    key: 'twelveMonth',
    align: 'right',
  },
  {
    title: '第13个月',
    dataIndex: 'thirteenMonth',
    key: 'thirteenMonth',
    align: 'right',
  },
  {
    title: '第14个月',
    dataIndex: 'fourteenMonth',
    key: 'fourteenMonth',
    align: 'right',
  },
  {
    title: '第15个月',
    dataIndex: 'fifteenMonth',
    key: 'fifteenMonth',
    align: 'right',
  },
  {
    title: '第16个月',
    dataIndex: 'sixteenMonth',
    key: 'sixteenMonth',
    align: 'right',
  },
  {
    title: '第17个月',
    dataIndex: 'seventeenMonth',
    key: 'seventeenMonth',
    align: 'right',
  },
  {
    title: '第18个月',
    dataIndex: 'eighteenMonth',
    key: 'eighteenMonth',
    align: 'right',
  },
  {
    title: '第19个月',
    dataIndex: 'nineteenMonth',
    key: 'nineteenMonth',
    align: 'right',
  },
  {
    title: '第20个月',
    dataIndex: 'twentyMonth',
    key: 'twentyMonth',
    align: 'right',
  },
  {
    title: '第21个月',
    dataIndex: 'twentyOneMonth',
    key: 'twentyOneMonth',
    align: 'right',
  },
  {
    title: '第22个月',
    dataIndex: 'twentyTwoMonth',
    key: 'twentyTwoMonth',
    align: 'right',
  },
  {
    title: '第23个月',
    dataIndex: 'twentyThreeMonth',
    key: 'twentyThreeMonth',
    align: 'right',
  },
  {
    title: '第24个月',
    dataIndex: 'twentyFourMonth',
    key: 'twentyFourMonth',
    align: 'right',
  },
  {
    title: '合计',
    dataIndex: 'total',
    key: 'total',
    align: 'right',
  },
];

// 回款系数
export default function ReturnMoneyCoefficient({ versionId }) {
  const [visible, setVisible] = useState(false);
  const [dataSource, setDataSource] = useState([]);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    if (visible) {
      setLoading(true);
      api
        .returnCoefficientDetailListUsingGET({ params: { versionId } })
        .then(res => {
          if (res && res.code === 1 && !_.isEmpty(res.data)) {
            const cloneList = _.cloneDeep(res.data);
            _.forEach(cloneList, val => {
              const x = val;
              for (let i = 0; i < key.length; i += 1) {
                x[key[i]] = val[key[i]] ? `${(val[key[i]] * 100).toFixed(3)}%` : 0;
              }
            });
            setDataSource(cloneList);
          }
        })
        .then(() => setLoading(false));
    }
  }, [visible]);
  return (
    <>
      <Button onClick={() => setVisible(true)}>回款系数</Button>
      <Drawer title="回款系数" width={1000} onClose={() => setVisible(false)} visible={visible}>
        <Card>
          <Table
            bordered
            columns={columns}
            size="middle"
            scroll={{ y: document.body.clientHeight - 170, x: 2100 }}
            loading={loading && _.isEmpty(dataSource)}
            dataSource={dataSource}
            pagination={false}
          />
        </Card>
        <div
          style={{
            position: 'absolute',
            left: 0,
            bottom: 0,
            width: '100%',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'center',
          }}
        >
          <Button onClick={() => setVisible(false)}>关闭</Button>
        </div>
      </Drawer>
    </>
  );
}
